<template>
	<view style="min-height: 100vh;background: #fff;padding: 24rpx;">
		<uni-swipe-action class="uni-list">
			<uni-swipe-action-item
				:right-options="options"
				@change="swipeChange($event, index)"
				class="uni-list-cell uni-list-cell-pd"
				style="width:100% !important;"
				v-for="(item, index) in personList"
				:key="index"
				@click="onClick(item.id)"
			>
				<view class="handle">
					<view class="choose" @click.stop="handleClick(item, index)">
						<img :src="choose" v-if="item.checked" />
						<img :src="noChoose" v-else />
					</view>
				</view>
				<view class="touch">
					<view class="name">{{ item.name }}</view>
					<view>{{ item.phone }}</view>
					<view class="edit" @click.stop="edit(item.id)"><img :src="img" /></view>
				</view>
			</uni-swipe-action-item>
		</uni-swipe-action>

		<view class="noData" v-if="!items.length">报名活动，请添加参与人哦~</view>
		<view class="btn">
			<button class="add" @click="add">+ 添加参与人</button>
			<button class="tj" :disabled="disabled" @click="save()">提交</button>
		</view>
	</view>
</template>

<script>
import http from '@/common/request.js';
export default {
	data() {
		return {
			limit: 0,
			options: [
				{
					text: '删除',
					style: {
						backgroundColor: '#FACC6B',
						color: '#66645D',
						fontSize: '25rpx',
						lineHeight: '90rpx'
					}
				}
			],
			personList: [],
			editFlag: true,
			disabled: false,
			items: [],
			touchStartX: 0, // 触屏起始点x
			touchStartY: 0, // 触屏起始点y
			current: 0,
			activityId: '',
			sessionId: '',
			flag: 0, //1向左滑动,2向右滑动,3向上滑动 4向下滑动
			text: '', //向哪里滑动
			lastX: 0,
			lastY: 0,
			index: 0,
			isTrue: true,
			choose: 'https://mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/images/interaction/xz.png',
			noChoose: 'https://mall-rongchuang.oss-cn-beijing.aliyuncs.com/upload/xzN.png',
			img: 'https://mall-rongchuang.oss-cn-beijing.aliyuncs.com/upload/edit.png',
			list: []
		};
	},
	onLoad(option) {
		this.sessionId = option.sessionId;
		this.activityId = option.activityId;
		this.limit = Number(option.limit);
	},
	// mounted() {
	// 	let a = document.getElementsByClassName('uni-page-head-hd')[0]
	// 	a.style.display = 'none';
	// },
	onShow() {
		this.record();
	},
	methods: {
		onClick(id) {
			http('/api/cusActivityAssociatedUser/' + id, {
				data: {},
				method: 'DELETE'
			}).then(result => {
				if (result.code == '200') {
					this.record();
				}
			});
		},
		swipeChange(e, index) {
			this.editFlag = !this.editFlag;
		},
		handleClick(item, index) {
			this.personList[index].checked = !this.personList[index].checked;
			let count = 0;
			for (let person of this.personList) {
				if (person.checked) {
					count++;
				}
			}
			if (this.limit !== 0 && count > this.limit) {
				uni.showToast({
					title: `只能勾选${this.limit}个人参与报名`,
					icon: 'none'
				});
				this.personList[index].checked = !this.personList[index].checked;
				return;
			}
		},
		record() {
			http('/api/cusActivityAssociatedUser/list', {
				data: {
					activityId: this.activityId
				},
				method: 'GET'
			}).then(result => {
				if (result.code == '200') {
					this.items = result.data;
					let newData = [];
					this.items.forEach(item => {
						let data = JSON.parse(item.relatedPerson);
						newData.push({
							name: data[0].content,
							phone: data[1].content,
							id: item.id,
							checked: false
						});
					});
					this.personList = newData;
				}
			});
		},
		save() {
			this.disabled = true;
			let data = [],
				list = [];
			this.personList.forEach((item, index) => {
				if (item.checked) {
					list.push(index);
				}
			});
			if (!list.length) {
				this.disabled = false;
				uni.showToast({
					title: '请选择要报名的人',
					icon: 'none'
				});
				return;
			}
			list.forEach(item => {
				let personData = JSON.parse(this.items[item].relatedPerson);
				data.push({
					contentList: personData
				});
			});
			http('/api/activity/signUp', {
				data: {
					sessionId: this.sessionId,
					activityId: this.activityId,
					signUpList: data
				},
				method: 'POST'
			}).then(
				result => {
					if (result.code == '200') {
						this.disabled = false;
						uni.showToast({
							title: result.msg,
							icon: 'none'
						});
						setTimeout(() => {
							uni.navigateTo({
								url: '/activity/info/index?activityId=' + this.activityId + '&sessionId=' + this.sessionId,
								animationType: 'pop-in',
								animationDuration: 200
							});
						}, 2000);
					}
				},
				result => {
					this.disabled = false;
					if (result.code == '8047') {
						uni.showToast({
							title: result.msg,
							icon: 'none'
						});
						setTimeout(() => {
							uni.navigateTo({
								url: '/activity/info/index?activityId=' + this.activityId + '&sessionId=' + this.sessionId,
								animationType: 'pop-in',
								animationDuration: 200
							});
						}, 2000);
					}
				}
			);
		},
		add() {
			uni.navigateTo({
				url: '/activity/info/addPerson?activityId=' + this.activityId + '&sessionId=' + this.sessionId,
				animationType: 'pop-in',
				animationDuration: 200
			});
		},
		edit(id) {
			uni.navigateTo({
				url: '/activity/info/addPerson?personId=' + id + '&activityId=' + this.activityId + '&sessionId=' + this.sessionId,
				animationType: 'pop-in',
				animationDuration: 200
			});
		}
	}
};
</script>

<style scoped lang="less">
/deep/.uni-swipe_box {
	width: 100% !important;
}
/deep/ .uni-list-cell {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 30rpx;
	color: #66645d;
	height: 90rpx;
	align-items: center;
	line-height: 90rpx;
	align-items: center;
	border-bottom: 1px solid rgba(102, 100, 93, 0.06);
	position: relative;

	.handle {
		width: 60rpx;
		float: left;
		.choose {
			margin-right: 40rpx;
			line-height: 40rpx;

			img {
				width: 36rpx;
				height: 36rpx;
				margin-top: 33rpx;
			}
		}
	}

	.touch {
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: space-between;
		width: 600rpx;

		.name {
			width: 200rpx;
			text-align: left;
		}

		.delete {
			width: 120rpx;
			height: 90rpx;
			text-align: center;
			line-height: 90rpx;
			background: rgba(250, 204, 107, 1);
			color: #66645d;
			font-size: 25rpx;
		}

		.edit {
			display: flex;
			align-items: center;
			width: 100rpx;
			height: 100rpx;
			justify-content: flex-end;
			img {
				margin-left: 20rpx;
				width: 30rpx;
				height: 30rpx;
			}
		}
	}
}
.noData {
	font-size: 30rpx;
	text-align: center;
	margin-top: 60%;
	color: #969696;
}
.btn {
	position: fixed;
	bottom: 36rpx;
	text-align: center;
	left: 24rpx;
	right: 24rpx;

	.add {
		height: 80rpx;
		line-height: 80rpx;
		border: 1px solid #facc6b;
		border-radius: 12rpx;
		font-size: 30rpx;
		color: #facc6b;
		background: #fff;
	}

	.tj {
		height: 82rpx;
		line-height: 82rpx;
		background: #facc6b;
		border-radius: 12rpx;
		font-size: 30rpx;
		color: #66645d;
		margin-top: 36rpx;
	}
}
</style>
